<template>
    <div id="swiper">
        <div class="w-slider" id="js_slider">
            <div class="slider">
                <div class="slider-main" id="slider_main_block">
                    <div class="slider-main-img"><a href="#"><img src="./images/1.jpg" alt=""/></a></div>
                    <div class="slider-main-img"><a href="#"><img src="./images/2.jpg" alt=""/></a></div>
                    <div class="slider-main-img"><a href="#"><img src="./images/3.jpg" alt=""/></a></div>
                    <div class="slider-main-img"><a href="#"><img src="./images/4.jpg" alt=""/></a></div>
                    <div class="slider-main-img"><a href="#"><img src="./images/5.jpg" alt=""/></a></div>
                    <div class="slider-main-img"><a href="#"><img src="./images/6.jpg" alt=""/></a></div>
                </div>
            </div>
            <div class="slider-ctrl" id="slider_ctrl">
                <span class="slider-ctrl-prev"></span>
                <span class="slider-ctrl-next"></span>
            </div>
        </div>
    </div>
</template>
<script>
    import  {animate, getStyle}  from './js/animate.js';
    export default{
        data(){
            return {}
        },
        mounted(){
            function $(id) {
                return document.getElementById(id);
            }
            var js_slider = $("js_slider");
            var slider_main_block = $("slider_main_block");
            var imgs = slider_main_block.children;
            var slider_ctrl = $("slider_ctrl");
            for (var i = 0; i < imgs.length; i++) {
                var span = document.createElement("span");
                span.className = "slider-ctrl-con";
                span.innerHTML = imgs.length - i;
                slider_ctrl.insertBefore(span, slider_ctrl.children[1]);
            }
            var spans = slider_ctrl.children;
            spans[1].setAttribute("class", "slider-ctrl-con current");

            var scrollWidth = js_slider.clientWidth;
            for (var i = 1; i < imgs.length; i++) {
                imgs[i].style.left = scrollWidth + "px";
            }
            var iNow = 0;
            for (var k in spans) {
                if(k=='length'){
                    continue
                }
                spans[k].onclick = function () {
                    if (this.className == "slider-ctrl-prev") {
                        animate(imgs[iNow], {left: scrollWidth});
                        --iNow < 0 ? iNow = imgs.length - 1 : iNow;
                        imgs[iNow].style.left = -scrollWidth + "px";
                        animate(imgs[iNow], {left: 0});
                        setSquare();
                    }
                    else if (this.className == "slider-ctrl-next") {  // 右侧按钮开始
                        autoplay();
                    }
                    else {

                        var that = this.innerHTML - 1;
                        if (that > iNow) {
                        }
                        else if (that < iNow) {
                            animate(imgs[iNow], {left: scrollWidth});
                            imgs[that].style.left = -scrollWidth + "px";
                        }
                        iNow = that;  // 给当前的索引号
                        animate(imgs[iNow], {left: 0});

                        setSquare();
                    }
                }
            }
            function setSquare() {
                for (var i = 1; i < spans.length - 1; i++) {
                    spans[i].className = "slider-ctrl-con";
                }
                spans[iNow + 1].className = "slider-ctrl-con current";
            }


            var timer = null;
            timer = setInterval(autoplay, 1000);
            function autoplay() {

                animate(imgs[iNow], {left: -scrollWidth});

                ++iNow > imgs.length - 1 ? iNow = 0 : iNow;
                imgs[iNow].style.left = scrollWidth + "px";
                animate(imgs[iNow], {left: 0});
                setSquare();
            }

            js_slider.onmouseover = function () {
                clearInterval(timer);
            }
            js_slider.onmouseout = function () {
                clearInterval(timer);  // 要执行定时器 先清除定时器
                timer = setInterval(autoplay, 1000);  // 开启定时器
            }
        }
    }
</script>
<style scoped>
    @import './css/css.css';
</style>